<!DOCTYPE HTML>
<html>

<head>
    <title> ZHL's Personal website</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="author" content="Zhang Hui Ling">
    <link rel="icon" href="images/Logo.png " type="image/x-icon" />
    <meta name="keywords" content="个人作品集, 个人网站, 作品集, 设计作品集, UX/UI, 交互作品, 设计师网站">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/slimmenu.css" rel="stylesheet" media="screen">
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <div class="content" id="home">
        <div class="wrap">
            <div class="header_style1">
                <!-- start h_logo -->
                <div class="logo">
                    <h1><a href="index.html">HuiLing</a></h1>
                </div>
                <!-- start h_menu -->
                <div class="h_menu">
                    <ul class="flexy-menu thick orange">
                        <li> <a href="#home" class="scroll">Home</a></li>
                        <li><a href="#Work" class="scroll">Work</a></li>
                        <li><a href="#skills" class="scroll">Skills</a> </li>
                        <li><a href="#Experience" class="scroll">About</a></li>
                        <li><a href="#contact" class="scroll">Contact</a></li>
                    </ul>
                </div>
                <!-- end h_menu -->
                <div class="clear"> </div>
            </div>
            <!---------menu-script------------->
            <!-- start manu -->
            <script type="text/javascript" src="js/flexy-menu.js"></script>
            <link href="css/header_style1.css" rel="stylesheet" type="text/css" media="all" />
            <script type="text/javascript">
                $(document).ready(function() {
                    $(".flexy-menu").flexymenu({
                        speed: 400,
                        type: "horizontal",
                        align: "right"
                    });
                });
            </script>
            <!---------end-script-menu------------->
            <div class="slider">
                <!---start-da-slider----->
                <div id="da-slider" class="da-slider">
                    <div class="da-slide">
                        <h2>Designer & HuiLing</h2>
                        <p>A sophomore in Chengdu Neusoft, studying in the first Class of Art and Science and Technology of the Department of Digital Art</p>
                        <a href="images/tiao 1.jpg" class="da-link"><span> READ NOW</span></a> </div>
                    <div class="da-slide">
                        <h2>WELCOME</h2>
                        <p>My Website</p>
                        <a href="images/tiao 2.jpg" class="da-link"><span> READ NOW</span></a> </div>
                    <div class="da-slide">
                        <h2>Designer & HuiLing</h2>
                        <p>A sophomore in Chengdu Neusoft, studying in the first Class of Art and Science and Technology of the Department of Digital Art</p>
                        <a href="images/tiao 1.jpg" class="da-link"><span> READ NOW</span></a> </div>
                    <nav class="da-arrows"> <span class="da-arrows-prev"></span> <span class="da-arrows-next"></span> </nav>
                </div>
                <div class="down-arrow"> <a href="#group_1" class="scroll"><span> </span></a> </div>
                <link rel="stylesheet" type="text/css" href="css/slider.css" />
                <script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
                <script type="text/javascript" src="js/jquery.cslider.js"></script>
                <script type="text/javascript">
                    $(function() {

                        $('#da-slider').cslider({
                            autoplay: true,
                            bgincrement: 450
                        });

                    });
                </script>
                <!---//End-da-slider----->
            </div>
        </div>
    </div>
    <!----start-team--------->
    <div class="group_1" id="group_1">
        <div class="group_1-items">
            <div class="wrap">
                <div id="owl-demo" class="owl-carousel">
                    <div class="item">
                        <div class="carousel">
                            <div class="group_1_img">
                                <h3 class="ui">UI</h3>
                                <h4 class="ux">UX</h4>
                                <div class="clear"> </div>
                            </div>
                            <div class="group_1_text">
                                <h3>I create simple interfaces for humans and enjoy pixel-perfection.</h3>
                                <p>I’m an experienced and passionate user interface designer with interaction design background.</p>
                            </div>
                            <div class="clear"> </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="carousel">
                            <div class="group_1_img">
                                <h3 class="ui fontend">FRONTEND</h3>
                                <h4 class="ux ui1">UI</h4>
                                <div class="clear"> </div>
                            </div>
                            <div class="group_1_text">
                                <h3>I create simple interfaces for humans and enjoy pixel-perfection.</h3>
                                <p>I’m an experienced and passionate user interface designer with interaction design background.</p>
                            </div>
                            <div class="clear"> </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="carousel">
                            <div class="group_1_img ">
                                <h3 class="ui core">CORE</h3>
                                <h4 class="ux ui1">UI</h4>
                                <div class="clear"> </div>
                            </div>
                            <div class="group_1_text">
                                <h3>I create simple interfaces for humans and enjoy pixel-perfection.</h3>
                                <p>I’m an experienced and passionate user interface designer with interaction design background.</p>
                            </div>
                            <div class="clear"> </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="group_2" id="Work">
        <h3 class="heading">Work</h3>
        <div class="group_2_items">
            <div class="wrap">
                <div id="owl-demo1" class="owl-carousel">
                    <div class="item">
                        <div class="carousel">
                            <div class="group_2_img1"> <img src="images/1.png" alt=""> </div>
                            <div class="group_2_text2">
                                <div class="desc">
                                    <h3>类型</h3>
                                    <h4>Layout design</h4>
                                </div>
                                <div class="desc">
                                    <h3>主色调</h3>
                                    <h4>pink</h4>
                                </div>
                                <div class="desc">
                                    <h3>内容</h3>
                                    <h4>Blue and white echo, showing the home of bright and fresh</h4>
                                </div>
                                <div class="button_2"> <a href="images/4.jpg">YES</a> </div>
                            </div>
                            <div class="clear"> </div>
                            <div class="brows_button_3"> <a href="http://zhang-huiling.gitee.io/assignment-1">Know More</a> </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="carousel">
                            <div class="group_2_img1"> <img src="images/2.png" alt=""> </div>
                            <div class="group_2_text2">
                                <div class="desc">
                                    <h3>类型</h3>
                                    <h4>Layout design</h4>
                                </div>
                                <div class="desc">
                                    <h3>主色调</h3>
                                    <h4>blue</h4>
                                </div>
                                <div class="desc">
                                    <h3>内容</h3>
                                    <h4>A girl full of pink heart </h4>
                                </div>
                                <div class="button_2"> <a href="images/5.jpg">YES</a> </div>
                            </div>
                            <div class="clear"> </div>
                            <div class="brows_button_3"> <a href="images/4.jpg">Know More</a> </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="carousel">
                            <div class="group_2_img1"> <img src="images/3.png" alt=""> </div>
                            <div class="group_2_text2">
                                <div class="desc">
                                    <h3>类型</h3>
                                    <h4>Layout design</h4>
                                </div>
                                <div class="desc">
                                    <h3>主色调</h3>
                                    <h4>green</h4>
                                </div>
                                <div class="desc">
                                    <h3>内容</h3>
                                    <h4>The picture has high jumping rate, strong color contrast and high-level sense</h4>
                                </div>
                                <div class="button_2"> <a href="images/4.jpg">YES</a> </div>
                            </div>
                            <div class="clear"> </div>
                            <div class="brows_button_3"> <a href="images/tiao 3.jpg">Know More</a> </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="carousel">
                            <div class="group_2_img1"> <img src="images/5.png" alt=""> </div>
                            <div class="group_2_text2">
                                <div class="desc">
                                    <h3>类型</h3>
                                    <h4>Layout design</h4>
                                </div>
                                <div class="desc">
                                    <h3>主色调</h3>
                                    <h4>Simple white</h4>
                                </div>
                                <div class="desc">
                                    <h3>内容</h3>
                                    <h4>Home is mostly beige, beige. It gives people a fresh and elegant feeling.</h4>
                                </div>
                                <div class="button_2"> <a href="images/2.png">YES</a> </div>
                            </div>
                            <div class="clear"> </div>
                            <div class="brows_button_3"> <a href="images/1.png">Know More</a> </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Owl Carousel Assets -->
    <link href="css/owl.carousel.css" rel="stylesheet">
    <!-- Owl Carousel Assets -->
    <!-- Prettify -->
    <script src="js/owl.carousel.js"></script>
    <script>
        $(document).ready(function() {

            $("#owl-demo").owlCarousel({
                items: 1,
                lazyLoad: true,
                autoPlay: true,
                navigation: true,
                navigationText: ["", ""],
                rewindNav: true,
                scrollPerPage: true,
                pagination: true,
                paginationNumbers: false,
            });

        });
        $(document).ready(function() {

            $("#owl-demo1").owlCarousel({
                items: 1,
                lazyLoad: true,
                autoPlay: true,
                navigation: true,
                navigationText: ["", ""],
                rewindNav: true,
                scrollPerPage: true,
                pagination: false,
                paginationNumbers: false,
            });

        });
        $(document).ready(function() {

            $("#owl-demo2").owlCarousel({
                items: 1,
                lazyLoad: true,
                autoPlay: true,
                navigation: false,
                navigationText: ["", ""],
                rewindNav: false,
                scrollPerPage: true,
                pagination: false,
                paginationNumbers: false,
            });

        });
    </script>
    <!-- //Owl Carousel Assets -->
    <div class="skills" id="skills">
        <section class="text-light">
            <div class="wrap">
                <div class="row-content1">
                    <h3 class="heading">Skills</h3>
                    <p class="para">At the end of his freshman year, I won the national inspirational scholarship and the title of<br> "three good students"; Learn a variety of academic software</p>
                    <div class="chart" data-percent="73" data-bar-color="#35AFBA" data-animate="4000">
                        <div class="chart-content">
                            <div class="percent"></div>
                            <div class="chart-title">User UI ps AI</div>
                        </div>
                        <!-- chart-content -->
                    </div>
                    <!-- chart -->
                    <div class="chart" data-percent="85" data-bar-color="#FF6060" data-animate="2500">
                        <div class="chart-content">
                            <div class="percent"></div>
                            <div class="chart-title">wps</div>
                        </div>
                        <!-- chart-content -->
                    </div>
                    <!-- chart -->
                    <div class="chart" data-percent="70" data-bar-color="#3AD079" data-animate="3000">
                        <div class="chart-content">
                            <div class="percent"></div>
                            <div class="chart-title">User office excel</div>
                        </div>
                        <!-- chart-content -->
                    </div>
                    <!-- chart -->
                    <div class="chart" data-percent="40" data-bar-color="#58C0E3" data-animate="3500">
                        <div class="chart-content">
                            <div class="percent"></div>
                            <div class="chart-title">User Experience PPT Word</div>
                        </div>
                        <!-- chart-content -->
                    </div>
                    <!-- chart -->
                    <div class="clear"> </div>
                </div>
            </div>
        </section>
        <script src="js/plugins.js"></script>
        <script src="js/script.js"></script>
    </div>
    <div class="exper" id="Experience">
        <div class="wrap">
            <h3 class="heading">About</h3>
            <section class="row section">
                <div class="row-content2">
                    <div class="timeline-label column six">
                        <h4>我为自己代言</h4>
                        <p>Specialties :User UI ps AI，User office excel，User Experience PPT Word，wps. </p>
                        <div class="brows_button_4"> <a href="images/7.jpg">View on Link</a> </div>
                    </div>
                    <!-- timeline-label -->
                    <div class="timeline column six last">
                        <div class="year">
                            <time datetime="2013">2019</time>
                            <div class="experience"> <span class="circle"></span>
                                <div class="experience-img"><img src="images/icn1.png" alt=""></div>
                                <div class="experience-info clear-after">
                                    <h5>基本信息</h5>
                                    <div class="role">A sophomore in Chengdu Neusoft University</div>
                                    <p>Major is art and science and technology, participate in a lot of activities, competitions, let's learn about it together?</p>
                                </div>
                                <!-- experience-info -->
                            </div>
                            <!-- experience -->
                            <div class="experience"> <span class="circle"></span>
                                <div class="experience-img"><img src="images/icn4.jpg" alt=""></div>
                                <div class="experience-info clear-after">
                                    <h5>自我评价</h5>
                                    <div class="role">A future designer who studies hard </div>
                                    <p>Every day I think, are you ready today? What did you do today? What level do you want to achieve in the future? How much effort do you have to make? There are many challenges in the future. I hope to have my own pace.
                                        Come on!</p>
                                </div>
                                <!-- experience-info -->
                            </div>
                            <!-- experience -->
                        </div>
                        <!-- year -->
                        <div class="year year1">
                            <time datetime="2012">2020</time>
                            <div class="experience"> <span class="circle"></span>
                                <div class="experience-img"><img src="images/icn3.jpg" alt=""></div>
                                <div class="experience-info clear-after">
                                    <h5>个人爱好</h5>
                                    <div class="role">Designer</div>
                                    <p>The main hobbies are training and using various software skills, hobbies like reading English newspapers</p>
                                </div>
                                <!-- experience-info -->
                            </div>
                            <!-- experience -->
                            <div class="experience"> <span class="circle"></span>
                                <div class="experience-img"><img src="images/icn2.png" alt=""></div>
                                <div class="experience-info clear-after">
                                    <h5>荣誉奖项</h5>
                                    <div class="role">college students</div>
                                    <p>At the end of his freshman year, he won the national inspirational scholarship and the title of "three good students"; during his freshman year, he won the excellent writing award of the national college students correcting
                                        network
                                    </p>
                                </div>
                                <!-- experience-info -->
                            </div>
                            <!-- experience -->
                        </div>
                        <!-- year -->
                    </div>
                    <!-- timeline -->
                    <div class="clear"> </div>
                </div>
            </section>
        </div>
    </div>
    <div class="group_3">
        <div class="group_3-items">
            <div class="wrap">
                <div id="owl-demo2" class="owl-carousel">
                    <div class="item">
                        <div class="carousel">
                            <div class="group_3_img"> <img src="images/4 头像.png" alt=""> </div>
                            <div class="group_1_text group_3_text">
                                <h3>关于我</h3>
                                <p>A sophomore in Chengdu Neusoft, studying in the first Class of Art and Science and Technology of the Department of Digital Art.</p>
                            </div>
                            <div class="clear"> </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="carousel">
                            <div class="group_3_img"> <img src="images/5 头像.png" alt=""> </div>
                            <div class="group_1_text group_3_text">
                                <h3>不一样的我</h3>
                                <p>About my big head, there is a fat head fish's title.Cartoon world of me, different myself, dare to try, this is me, are you afraid？</p>
                            </div>
                            <div class="clear"> </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="carousel">
                            <div class=" group_3_img"> <img src="images/4 头像.png" alt=""> </div>
                            <div class="group_1_text group_3_text">
                                <h3>一脸认真的我</h3>
                                <p>Learning is my own business. I am willing to devote my time to study. I am not deeply smart, but time can prove everything, only effortsWould you like to join us?</p>
                            </div>
                            <div class="clear"> </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="contact" id="contact">
        <div class="wrap">
            <h3 class="heading">Contact</h3>
            <form>
                <div class="left-form">
                    <ul>
                        <li class="name">
                            <a href="#" class="icon user"> </a>
                            <input type="text" placeholder="Username" required>
                            <div class="clear"> </div>
                        </li>
                        <li class="email">
                            <a href="#" class="icon mail"> </a>
                            <input type="email" placeholder="Email" required>
                            <div class="clear"> </div>
                        </li>
                        <div class="clear"> </div>
                        <li>
                            <input type="text" placeholder="Cost of your project" required>
                            <div class="clear"> </div>
                        </li>
                        <li>
                            <input type="text" placeholder="Timeline" required>
                            <div class="clear"> </div>
                        </li>
                        <li>
                            <textarea class="plain buffer" placeholder="Don't forget that kindness is all!"> Don't forget that kindness is all!</textarea>
                            <div class="clear"> </div>
                        </li>
                        <div class="send"> <a href="#">SEND</a> </div>
                    </ul>
                </div>
                <div class="right-form">
                    <h4>LOCATION</h4>
                    <p>四川省成都市东软大道一号成都东软学院</p>
                    <div class="soc_icons">
                        <h4>I AM SOCIAL</h4>
                        <ul>
                            <li>
                                <a class="icon1" href="#"> <span>Facebook</span> </a>
                            </li>
                            <li><a class="icon2" href="#"><span>Twitter</span></a></li>
                            <li><a class="icon3" href="#"><span>Google+</span></a></li>
                            <li><a class="icon4" href="#"><span>Linkedin</span></a></li>
                            <li><a class="icon5" href="#"><span>Flickr</span></a></li>
                            <div class="clear"> </div>
                        </ul>
                    </div>
                </div>
                <div class="clear"> </div>
            </form>
        </div>
    </div>
    <div class="contact-map">
        <iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.in/?ie=UTF8&amp;ll=22.593726,79.453125&amp;spn=3.803105,6.696167&amp;t=m&amp;z=8&amp;output=embed"></iframe>
    </div>
    <div class="footer">
        <div class="wrap">
            <div class="row-content buffer clear-after">
                <section id="top-footer">
                    <div class="widget column three">
                        <!-- la class="widget" è forse generata utomaticamente da wp -->
                        <h4>Menu</h4>
                        <ul class="plain">
                            <li> <a href="#home" class="scroll">Home</a> </li>
                            <li><a href="#Portfolio" class="scroll">work</a></li>
                            <li><a href="#skills" class="scroll">Skills</a> </li>
                            <li><a a href="#Experience" class="scroll">About</a></li>
                            <li><a href="#contact" class="scroll">Contact</a></li>
                            <div class="clear"> </div>
                        </ul>
                    </div>
                    <div class="widget column three">
                        <h4>Years</h4>
                        <ul class="plain">
                            <li><a href="#">March 2014</a></li>
                            <li><a href="#">April 2014</a></li>
                            <li><a href="#">May 2014</a></li>
                            <li><a href="#">June 2014</a></li>
                            <li><a href="#">July 2014</a></li>
                            <div class="clear"> </div>
                        </ul>
                    </div>
                    <div class="widget column three">
                        <h4>Widget</h4>
                        <p>Do you like us? Please join us and click the contact information on the right.</p>
                    </div>
                    <div class="widget meta-social column three last">
                        <div class="soc_icons soc_icons1">
                            <h4>Follows</h4>
                            <ul>
                                <li>
                                    <a class="icon1" href="#"> </a>
                                </li>
                                <li>
                                    <a class="icon2" href="#"> </a>
                                </li>
                                <li>
                                    <a class="icon3" href="#"> </a>
                                </li>
                            </ul>
                            <div class="clear"> </div>
                        </div>
                    </div>
                    <div class="clear"> </div>
                </section>
                <!-- top-footer -->

            </div>
            <!-- row-content -->
        </div>
        <!-- row -->
        <div class="copy">
            <p>coopright.2020 all right received </p>
        </div>
        <!-- scroll_top_btn -->
        <script type="text/javascript" src="js/move-top.js"></script>
        <script type="text/javascript" src="js/easing.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {

                var defaults = {
                    containerID: 'toTop', // fading element id
                    containerHoverID: 'toTopHover', // fading element hover id
                    scrollSpeed: 1200,
                    easingType: 'linear'
                };


                $().UItoTop({
                    easingType: 'easeOutQuart'
                });

            });
        </script>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $(".scroll").click(function(event) {
                    event.preventDefault();
                    $('html,body').animate({
                        scrollTop: $(this.hash).offset().top
                    }, 1200);
                });
            });
        </script>
        <a href="#" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 1;"></span></a> </div>
    <div style="display:none">
        <script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script>
    </div>
</body>

</html>